'use strict';

var _interopRequireWildcard = require('@babel/runtime/helpers/interopRequireWildcard');
var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require('@babel/runtime/helpers/objectSpread2'));
var _slicedToArray2 = _interopRequireDefault(require('@babel/runtime/helpers/slicedToArray'));
var _react = _interopRequireWildcard(require('react'));
var _antd = require('antd');
var _DownOutlined = _interopRequireDefault(require('@ant-design/icons/DownOutlined'));
var _UpOutlined = _interopRequireDefault(require('@ant-design/icons/UpOutlined'));
var _Form = _interopRequireDefault(require('../../Form'));
var _consts = require('../../consts');
require('./index.css');
var QueryForm = function QueryForm(_ref) {
  var formProp = _ref.form,
    _ref$layout = _ref.layout,
    layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
    _ref$expandable = _ref.expandable,
    expandable = _ref$expandable === void 0 ? false : _ref$expandable,
    _ref$cols = _ref.cols,
    cols =
      _ref$cols === void 0
        ? {
            lg: 2,
            xl: 3,
            xxl: 4,
          }
        : _ref$cols,
    onSearch = _ref.onSearch,
    onReset = _ref.onReset,
    formProps = _ref.formProps,
    btns = _ref.btns,
    children = _ref.children;
  var _Form$useForm = _Form.default.useForm(),
    _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
    innerForm = _Form$useForm2[0];
  var form = (0, _react.useMemo)(
    function () {
      return formProp || innerForm;
    },
    [formProp, innerForm],
  );
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    expanded = _useState2[0],
    setExpanded = _useState2[1];
  var toggleExpand = (0, _react.useCallback)(
    function () {
      setExpanded(!expanded);
    },
    [expanded],
  );
  var grids = (0, _react.useMemo)(
    function () {
      var result = {};
      if (typeof cols === 'number') {
        result.span = 24 / cols;
        return result;
      }
      if (cols.xs)
        result.xs = {
          span: 24 / cols.xs,
        };
      if (cols.sm)
        result.sm = {
          span: 24 / cols.sm,
        };
      if (cols.md)
        result.md = {
          span: 24 / cols.md,
        };
      if (cols.lg)
        result.lg = {
          span: 24 / cols.lg,
        };
      if (cols.xl)
        result.xl = {
          span: 24 / cols.xl,
        };
      if (cols.xxl)
        result.xxl = {
          span: 24 / cols.xxl,
        };
      return result;
    },
    [cols],
  );
  var handleSearch = (0, _react.useCallback)(
    function () {
      var values = form.getFieldsValue();
      var result = {};
      Object.keys(values).forEach(function (key) {
        if (values[key] !== undefined) result[key] = values[key];
      });
      if (onSearch) onSearch(result);
    },
    [form, onSearch],
  );
  var handleReset = (0, _react.useCallback)(
    function () {
      form.resetFields();
      if (onReset) onReset();
    },
    [form, onReset],
  );
  var btnsNode = (0, _react.useMemo)(
    function () {
      if (typeof btns === 'function') {
        return btns({
          search: handleSearch,
          reset: handleReset,
        });
      } else if (btns) {
        return btns;
      }
    },
    [btns, handleSearch, handleReset],
  );
  var queryFormStyle = (0, _react.useMemo)(
    function () {
      var style = {};
      if (expandable)
        style = {
          paddingRight: 205,
        };
      return style;
    },
    [expandable],
  );
  var btnsStyle = (0, _react.useMemo)(
    function () {
      var style = {};
      if (layout === 'vertical')
        style = {
          marginTop: '30px',
        };
      return style;
    },
    [expandable],
  );
  var expandNode = (0, _react.useMemo)(
    function () {
      if (!expandable) return null;
      return expandable
        ? /*#__PURE__*/ _react.default.createElement(
            'a',
            {
              style: {
                marginLeft: 10,
              },
              onClick: toggleExpand,
            },
            '\u5C55\u5F00',
            expanded
              ? /*#__PURE__*/ _react.default.createElement(_UpOutlined.default, null)
              : /*#__PURE__*/ _react.default.createElement(_DownOutlined.default, null),
          )
        : /*#__PURE__*/ _react.default.createElement(
            'a',
            {
              style: {
                marginLeft: 10,
              },
              onClick: toggleExpand,
            },
            '\u6536\u8D77',
          );
    },
    [expandable, expanded, toggleExpand],
  );
  return /*#__PURE__*/ _react.default.createElement(
    _Form.default,
    (0, _objectSpread2.default)(
      (0, _objectSpread2.default)({}, formProps),
      {},
      {
        form: form,
        className: ''.concat(_consts.ClsPrefix, '-query-form-wrapper'),
        layout: layout,
      },
    ),
    /*#__PURE__*/ _react.default.createElement(
      'div',
      {
        className: ''.concat(_consts.ClsPrefix, '-query-form'),
        style: queryFormStyle,
      },
      /*#__PURE__*/ _react.default.createElement(
        _antd.Row,
        {
          gutter: 32,
          style: {
            width: 'calc(100% + 32px)',
          },
        },
        _react.default.Children.toArray(children)
          .filter(function (child) {
            return !!child;
          })
          .map(function (child, index) {
            var visible = true;
            if (expandable) {
              if (!expanded && expandable <= index) visible = false;
            }
            return visible
              ? /*#__PURE__*/
                // eslint-disable-next-line react/no-array-index-key
                _react.default.createElement(
                  _antd.Col,
                  (0, _objectSpread2.default)(
                    {
                      key: index,
                    },
                    grids,
                  ),
                  child,
                )
              : null;
          }),
      ),
      btnsNode
        ? btnsNode
        : /*#__PURE__*/ _react.default.createElement(
            'div',
            {
              className: ''.concat(_consts.ClsPrefix, '-query-form-btns'),
              style: btnsStyle,
            },
            /*#__PURE__*/ _react.default.createElement(
              _antd.Button,
              {
                type: 'primary',
                onClick: handleSearch,
              },
              '\u67E5\u8BE2',
            ),
            /*#__PURE__*/ _react.default.createElement(
              _antd.Button,
              {
                style: {
                  marginLeft: 10,
                },
                onClick: handleReset,
              },
              '\u91CD\u7F6E',
            ),
            expandNode,
          ),
    ),
  );
};
var _default = QueryForm;
exports.default = _default;
